<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册界面</title>
		<style type="text/css">
			table{
				border-collapse: collapse;
				width: 45%;
			}
			tr{
				width:30% ;
			}
			th{
				color:darkblue;
				font-family:"楷体";
				
			}
		</style>
		<script type="text/javascript">
			//用户名：
			function checkUname(){
				//获取用户名的对象
				var varunameid=document.getElementById("unameid");
				//获取提示信息对象
				var spanUnameid=document.getElementById("spanUname");
				var reguname= /^[\u4e00-\u9fa5]{2,6}$/ig;
				if(varunameid.value.length==0){
					spanUnameid.innerHTML="用户名不能为空";
					return false;
					spanUnameid.style.color="gold"
				}else if(reguname.test(varunameid.value)){
					spanUnameid.innerHTML="√";
					return true;
					spanUnameid.style.color="red";
				}else{
					spanUnameid.innerHTML="用户名输入有误";
					return false;
					spanUnameid.style.color="gold"
				}
			}
			//密码：
			function checkpassword(){
				var varpassword=document.getElementById("pwdid");
				var varspanpassword=document.getElementById("spanpasswordid");
				var regpwd= /^\w{6,12}$/g;
				if(varpassword.value.length==0){
					varspanpassword.innerHTML="密码不能为空";
					return false;
				}else if(regpwd.test(varpassword.value)){
					varspanpassword.innerHTML="√";
					return true;
					varspanpassword.style.color="red";
				}else{
					varspanpassword.innerHTML="密码输入有误";
					return false;
					varspanpassword.style.color="gold"
				}
			}
			
			//确认密码：
			function checkpwdnotarize(){
				var varpassword=document.getElementById("pwdid");
				var varpwdnotarize=document.getElementById("pwdnotarize");
				var varspanpwdnotarize=document.getElementById("spanpwdnotarize");
				if(varpwdnotarize.value.length==0){
					varspanpwdnotarize.innerHTML="确认密码不能为空";
					return false&&checkpassword();
				}else if(varpwdnotarize.value==varpassword.value){
					varspanpwdnotarize.innerHTML="√";
					return true&&checkpassword();
				}else{
					varspanpwdnotarize.innerHTML="确认密码有误";
					return false&&checkpassword();
				}
			}
			//出生日期：
			//喜爱球星：
			function checkselstar(){
				var varstar=document.getElementById("selstarid");
				var varspanstar=document.getElementById("spanselstarid");
				if(varstar.value==0){
					varspanstar.innerHTML="请选择球星";
					varspanstar.style.color="red";
					return false;
					
				}else{
					varspanstar.innerHTML="√";
					return true;
				}
			}
			//爱好：
			 function checkfav(){
			 	var varfav=document.getElementsByName("favourt");
			 	var varspanfav=document.getElementById("spanfav");
			 		for(var i=0;i<varfav.length;i++){
			 			if(varfav[i].checked){
			 				varspanfav.innerHTML="√";
			 				return true;
			 			}
			 		}
			 		varspanfav.innerHTML="至少选一个";
			 		varspanfav.style.color="red";
			 		return false;
			 }
			 
			//验证码：
			var varcode=parseInt(Math.random()*9000+1000);
			      //1、生成验证码：
			function creatcode(){
				varcode=parseInt(Math.random()*9000+1000);
				var varbutid=document.getElementById("butid");
				varbutid.value=varcode;
				
			}
			//2.验证码的校验
			function checkcode(){
				var vartextcode=document.getElementById("codeid");
				var varspan01=document.getElementById("span01id");
				if(vartextcode.value.length==0){
					varspan01.innerHTML="验证码不能为空";
					return false;
				}else if(vartextcode.value==varcode){
					varspan01.innerHTML="√";
					return true;
					
				}else{
					varspan01.innerHTML="验证码输入有误";
					return false;
				}
				
			}
			//同意提交复习框
			function checkcheckbox(){
				var varcheckbox=document.getElementById("agreeid");
				var varsubmit=document.getElementById("submitid");
				varsubmit.disabled=!varcheckbox.checked;
			}
			//重置：
			function checkreset(){
				var varboolreset=window.confirm("你确认要重新设置选项吗？");
				return varboolreset;
			}
			//提交：
			function checksubmit(){
				var varbooluname=checkUname();
				var varboolpassword=checkpassword();
				var varboolpwdnotarize=checkpwdnotarize();
				var varboolselstsr=checkselstar();
				var varboolfav=checkfav();
				var varboolcode=creatcode();
				var varboolcheckcode=checkcode();
				var varcheckbox=checkcheckbox();
				return varbooluname&&varboolpassword&&varboolpwdnotarize&&varboolselstsr&&varboolfav&&varboolcode&&varboolcheckcode&&varcheckboxvarcheckbox
			}
		</script>
	</head>
	<body background="img/5555.jpg" onload="creatcode()">
			<h2 align="center" style="color:whitesmoke; font-family: '新宋体';">欢迎用户进行注册</h2>
			<form action="#" onreset="return checkreset()" onsubmit="return checksubmit()">
				<table border="1px" align="center">
					<tr height="40px">
						<th >
							用户名:
						</th>
						<td style="80%">
							<input type="text" id="unameid" value="" style="background: none ;height: 20px; width:60% ;"onblur="checkUname()" />
							<span id="spanUname"></span>
						
						</td>
						
					</tr>
					<tr height="40px">
						<th >
							密码:
						</th>
						<td style="80%">
							<input type="password" id="pwdid" value="" style="background: none ;height: 20px; width:60% ;" onblur="checkpassword()"/>
							<span id="spanpasswordid"></span>	
						</td>
					</tr>
					<tr height="40px">
						<th >
							确认密码:
						</th>
						<td style="80%">
							<input type="password" id="pwdnotarize" value="" style="background: none ; height: 20px; width:60% ;"onblur="checkpwdnotarize();"/>
							<span id="spanpwdnotarize"></span>
							
						</td>
					</tr>
					<tr height="40px">
						<th >
							性别:
						</th>
						<td ><input type="radio" name="sex"  id="" value="1" />男
							<input type="radio" name="sex"  id="" value="2" />女
						</td>
					</tr>
					<tr height="40px">
						<th >
							出生日期:
						</th>
						<td >
							<select name="yMd" style="background: none;" >
								<option value="0">---请选择---</option>
								<option value="1">2017年</option>
								<option value="2">2016年</option>
								<option value="3">2015年</option>
								<option value="4">2014年</option>
								
							</select>
							<select name="yMd" style="background: none;" >
								<option value="0">---请选择---</option>
								<option value="1">12月</option>
								<option value="2">11月</option>
								<option value="3">10月</option>
								<option value="4">9月</option>
								<option value="5">8月</option>
								
							</select>
							<select name="yMd" style="background: none;" >
								<option value="0">---请选择---</option>
								<option value="1">1日</option>
								<option value="2">2日</option>
								<option value="3">3日</option>
								<option value="4">4日</option>
								<option value="5">5日</option>
								
							</select>
						</td>
					</tr>
					<tr height="40px">
						<th >
							喜欢的球星:
						</th>
						<td >
							<select name="" id="selstarid"   style="background: none;" onclick="checkselstar()">
								<option value="0">---请选择---</option>
								<option value="1">乔丹</option>
								<option value="2">姚明</option>
								<option value="3">詹姆士</option>
								<option value="4">卡特</option>
								<option value="5">约翰逊</option>
							</select>
							<span id="spanselstarid"></span>
						</td>
					</tr>
					
					<tr height="40px">
						<th >
							爱好:
						</th>
						<td >
							<input type="checkbox" name="favourt" id="" value="1" onclick="checkfav()" />游泳
							<input type="checkbox" name="favourt" id="" value="2" onclick="checkfav()"/>跑步
							<input type="checkbox" name="favourt" id="" value="3" onclick="checkfav()"/>登山
							<input type="checkbox" name="favourt" id="" value="4" onclick="checkfav()"/>散步
							<input type="checkbox" name="favourt" id="" value="5" onclick="checkfav()"/>骑车
							<span id="spanfav"></span>
						</td>
					</tr>
					<tr height="40px">
						<th >
							验证码:
						</th>
						<td >
							<input type="text"  id="codeid" placeholder="验证码" style="background: none ; height: 20px;"size="4" maxlength="4" onblur="checkcode()"/>
							<input type="button" id="butid" value="  " onclick="creatcode()" />
							<span id="span01id"></span>
						</td>
					</tr>
					<tr height="40px">
						<th  colspan="2" >
							<input type="checkbox" name="" id="agreeid" value="" checked="checked" onclick="checkcheckbox();"/><font color="indigo">是否同意本公司条约</font>
						</th>
					</tr>
					<tr height="40px">
						<th  colspan="2" >
							<input type="submit" id="submitid" name=""value="注册" />
							<input type="reset" name="resetid" id="" value="重置" />
						</th>
					</tr>
				</table>
				
			</form>
	</body>
</html>
